<template>
  <view class="user-page">
    <view class="user-info page-gradient-color">
      <view :style="{ height: getCustomBarHeight() + 'px' }"></view>
      <view class="avatar-warp">
        <view class="avatar circle-enlarge">
          <image
            class="img"
            src="../../common/images/recommand/classify1.jpg"
            mode="aspectFill"></image>
        </view>
      </view>
      <view class="nickname">{{ user.IP }}</view>
      <view class="address">
        来自于：
        {{
          user.address?.city || user.address?.province || user.address?.country
        }}
      </view>
    </view>

    <!-- menu1 -->
    <view class="menu-container">
      <view class="menu-list">
        <navigator :url="item.url" class="item" v-for="item in menuList">
          <view class="icon" :style="`--color: ${item.color}`">
            <uni-icons :type="item.icon" size="28"></uni-icons>
          </view>
          <view class="content">
            <view class="text">{{ item.name }}</view>
            <view class="right">
              <view class="number" v-if="item.number">{{ item.number }}</view>
              <uni-icons type="right" size="20"></uni-icons>
            </view>
          </view>
        </navigator>
      </view>
    </view>

    <!-- menu2 -->
    <view class="menu-container">
      <view class="menu-list">
        <navigator :url="item.url" class="item" v-for="item in menu2List">
          <view class="icon" :style="`--color: ${item.color}`">
            <uni-icons :type="item.icon" size="28"></uni-icons>
          </view>
          <view class="content">
            <view class="text">{{ item.name }}</view>
            <view class="right">
              <uni-icons type="right" size="20"></uni-icons>
            </view>
          </view>
          <view v-if="item.phone">
            <!-- #ifdef MP -->
            <button open-type="contact">联系客服</button>
            <!-- #endif -->
            <!-- #ifndef MP -->
            <button @click="callTel(item.phone)">拨打电话</button>
            <!-- #endif -->
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { apiUserInfo } from '@/api'
import { getCustomBarHeight } from '@/utils/system.js'

const user = ref({
  IP: '192.168.1.86',
  address: {
    country: '中国',
    province: '上海',
    city: '上海',
  },
})

const menuList = ref([
  {
    icon: 'download-filled',
    color: '#ff8eb5',
    name: '我的下载',
    url: '/pages/classlist/classlist?name=我的下载&type=download',
    number: 0,
    field: 'downloadSize',
  },
  {
    icon: 'star-filled',
    color: '#eee05f',
    name: '我的评分',
    url: '/pages/classlist/classlist?name=我的评分&type=score',
    number: 0,
    field: 'scoreSize',
  },
])
const menu2List = ref([
  {
    icon: 'notification-filled',
    color: '#cf68e0',
    name: '订阅更新',
    url: '/pages/notice/detail?id=653507c6466d417a3718e94b&title=订阅更新',
  },
  {
    icon: 'flag-filled',
    color: '#ff9800',
    name: '常见问题',
    url: '/pages/notice/detail?id=6536358ce0ec19c8d67fbe82&title=常见问题',
  },
  {
    icon: 'chatboxes-filled',
    color: '#647af5',
    name: '联系客服',
    phone: '18973734876',
  },
  {
    icon: 'help-filled',
    color: '#faea5a',
    name: '关于我们',
    url: '/pages/notice/detail?id=65361e318b0da4ca084e3ce0&title=关于我们',
  },
])

const callTel = phone => uni.makePhoneCall({ phoneNumber: phone })

const getUserInfo = async () => {
  user.value = await apiUserInfo()
  menuList.value
    .filter(item => item.field)
    .forEach(item => (item.number = user.value[item.field] || 0))
  console.log('%c Line:116 🍔 user.value', 'color:#ed9ec7', user.value)
}
getUserInfo()
</script>

<style lang="scss" scoped>
.user-page {
  background-color: #ededed;
  min-height: 100vh;
}

.user-info {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .avatar-warp {
    padding: 50rpx;
  }

  .avatar {
    --border-width: 10rpx;
    width: 192rpx;
    height: 192rpx;
    border-radius: 50%;
    overflow: hidden;
    // border: var(--border-width) solid rgba(255, 255, 255, 0.4);

    .img {
      width: 100%;
      height: 100%;
    }

    &.circle-enlarge {
      -webkit-animation: enlarge 2s linear infinite;
      animation: enlarge 2s linear infinite;
    }

    @keyframes enlarge {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5),
          0 0 0 20rpx rgba(255, 0, 0, 0.35), 0 0 0 40rpx rgba(255, 0, 0, 0.15);
      }
      33% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.3),
          0 0 0 20rpx rgba(255, 0, 0, 0.15), 0 0 0 40rpx rgba(255, 0, 0, 0);
      }
      66% {
        box-shadow: 0 0 0 20rpx rgba(255, 0, 0, 0.4),
          0 0 0 40rpx rgba(255, 0, 0, 0.3), 0 0 0 60rpx rgba(255, 0, 0, 0);
      }
      100% {
        box-shadow: 0 0 0 20rpx rgba(255, 0, 0, 0.4),
          0 0 0 40rpx rgba(255, 0, 0, 0.15), 0 0 0 60rpx rgba(255, 0, 0, 0);
      }
    }
  }

  .nickname {
    font-size: 40rpx;
    font-weight: 600;
    padding: 16rpx 0;
    color: $font-color-1;
  }

  .address {
    font-size: 28rpx;
    color: $font-color-3;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 30rpx;
  }
}

.menu-container {
  margin-top: 19rpx;
  margin-bottom: 19rpx;

  .menu-list {
    background-color: #ffffff;

    .item {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      position: relative;
      cursor: pointer;

      .icon {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        :deep() {
          .uni-icons {
            // color: $primary-theme-color !important;
            background-image: linear-gradient(
              to right,
              $primary-theme-color,
              var(--color) 95%
            ) !important;
            color: transparent !important;
            -webkit-background-clip: text;
          }
        }
      }

      .content {
        padding-right: 30rpx;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid $border-color;

        .text {
          color: #232323;
          font-size: 32rpx;
        }

        .right {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          :deep() {
            .uni-icons {
              color: $font-color-4 !important;
            }
          }
          .number {
            font-size: 28rpx;
            color: $font-color-4;
            margin-right: 6rpx;
          }
        }
      }

      button {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
      }
    }

    :deep() {
      .navigator-wrap:last-child {
        .item:last-child {
          .content {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
